<template>
  <div>
    <Card>
      <FormItem label="自定义班次">
        <FormItem>
          <Checkbox v-model:checked="useTemplate">是否使用排班模板</Checkbox>
        </FormItem>
        <template v-if="useTemplate == false">
          <div v-for="i in shiftCount" :key="i">
            <FormItem>
              <Space>
                <Input v-model:value="shift" style="width: 100px" placeholder="请输入班次" />
                <TimeRangePicker />
                当日
                <Select
                  v-model:value="value"
                  mode="multiple"
                  style="width: 280px"
                  placeholder="请选择"
                  :max-tag-count="2"
                  :max-tag-text-length="8"
                  :options="options"
                >
                </Select>
                <a @click="minus(i)"><MinusCircleOutlined /></a>
                <a v-if="i == shiftCount.length" @click="plus(i)"><PlusCircleOutlined /></a>
              </Space>
            </FormItem>
          </div>
        </template>
        <template v-if="useTemplate == true">
          <div v-for="i in 3" :key="i">
            <FormItem>
              <Space>
                {{ getShift(i) }}
                <TimeRangePicker />
                {{ i == 2 ? '次日' : '当日' }}
                <Select
                  v-model:value="value"
                  mode="multiple"
                  style="width: 280px"
                  placeholder="请选择"
                  :max-tag-count="2"
                  :max-tag-text-length="8"
                  :options="options"
                >
                </Select>
              </Space>
            </FormItem>
          </div>
        </template>
      </FormItem>
    </Card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

import { Card, FormItem, Select, TimeRangePicker, Checkbox, Space, Input } from 'ant-design-vue';

import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
const useTemplate = ref<boolean>(true);
const getShift = (i) => {
  let res = '';
  switch (i) {
    case 1:
      res = '早班';
      break;
    case 2:
      res = '中班';
      break;
    case 3:
      res = '晚班';
      break;
    default:
  }
  return res;
};
const shiftCount = ref([1]);
const shift = ref();
const minus = (i) => {
  shiftCount.value.delete(i - 1);
};
const plus = (i) => {
  shift.value = undefined;
  shiftCount.value.push(i + 1);
};
</script>
